<template>
    <div>
        <el-container style="min-height: 100vh;display: flex">
            <el-header style="padding: 0 0;height: auto">
                <el-row style="border-bottom: 1px solid rgba(200,200,200,0.75);">
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="1" style="text-align: left">
                                <el-button icon="el-icon-back" style="font-size: 28px;padding: 0 0"></el-button>
                            </el-col>
                            <el-col :span="23" style="text-align: left;">
                                <el-input v-model="filename" ></el-input>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-menu mode="horizontal" @select="handleSelect" style="line-height: 30px;border-bottom: 0">
                                    <el-submenu index="1">
                                        <template slot="title">文件</template>
                                        <el-menu-item index="1-1">导入</el-menu-item>
                                        <el-menu-item index="1-2">导出</el-menu-item>
                                        <el-menu-item index="1-3">打印</el-menu-item>
                                        <el-menu-item index="1-4">另存为</el-menu-item>
                                        <el-menu-item index="1-5">关闭</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="2">
                                        <template slot="title">编辑</template>
                                        <el-menu-item index="2-1">撤销</el-menu-item>
                                        <el-menu-item index="2-2">恢复</el-menu-item>
                                        <el-menu-item index="2-3">删除</el-menu-item>
                                        <el-menu-item index="2-4">全选</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="3">
                                        <template slot="title">视图</template>
                                        <el-menu-item index="3-1">放大</el-menu-item>
                                        <el-menu-item index="3-2">缩小</el-menu-item>
                                        <el-menu-item index="3-3">导航框</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="4">
                                        <template slot="title">模型</template>
                                    </el-submenu>
                                    <el-submenu index="5">
                                        <template slot="title">帮助</template>
                                        <el-menu-item index="5-1">功能查询</el-menu-item>
                                        <el-menu-item index="5-2">快捷键</el-menu-item>
                                        <el-menu-item index="5-3">反馈</el-menu-item>
                                    </el-submenu>
                                </el-menu>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12" style=" padding-top: 20px;">
                        <div style="float: right;padding-bottom: 10px">
                            <el-button style="border: 1px solid;margin-top: 10px" size="mini" >下载</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-avatar :src="circleUrl" style="float:right;margin-right: 20px;"></el-avatar>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="text-align: left;border-bottom: 1px solid rgba(200,200,200,0.75);">
                    <el-button style="padding: 8px 8px;margin-left: 15px"><img src="./img/readfile.png"/></el-button>
                    <el-button style="padding: 8px 8px;"><img src="./img/outputfile.png"/></el-button>
                    <el-divider direction="vertical" ></el-divider>
                    <el-button style="padding: 8px 8px;" @click="print"><img src="./img/printfile.png"/></el-button>
                    <el-button style="padding: 8px 8px;"><img src="./img/saveas.png"/></el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button style="padding: 8px 8px;" @click="undo"><img src="./img/toolbar1.png"/></el-button>
                    <el-button style="padding: 8px 8px;" @click="redo"><img src="./img/toolbar2.png"/></el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button style="padding: 8px 8px;"><img src="./img/delete.png"/></el-button>
                    <el-button style="padding: 8px 8px;"><img src="./img/selectAll.png"/></el-button>

                    <el-button icon="el-icon-search" style="float: right">功能查找</el-button>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="100px" style="background: aliceblue;">
                    <div style="height: 10px"></div>
                    <span style="">图形</span>
                    <el-divider></el-divider>
                    <div style="height: 300px" ref="toolbarContainer"></div>
                </el-aside>
                <el-main style="padding: 0">
                    <div ref="graphContainer"  class="kbs-graph-container" ></div>
                    <div v-if="outlineVisible" class="outline-container" ref="outlineContainer"></div>
                </el-main>
            </el-container>
            <el-footer style="height: 50px;text-align: right;padding-top: 10px;border-top: 1px solid;">
                <span style="float: left;padding-top: 5px">东华大学计算机科学与技术学院</span>
                <el-button style="padding: 8px 8px;" @click="zoomIn"><img src="./img/zoomIn.png"/></el-button>
                <el-button style="padding: 8px 8px;" @click="zoomOut"><img src="./img/zoomOut.png"/></el-button>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import { Graph } from './Graph'
    export default {
        name: "MxGraph",
        data() {
            return {
                graph:null,
                outlineVisible: true,
                filename:'新建文档',
                circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            }
        },
        created() {
            this.$nextTick(() => {
                this.init();
            })
        },
        methods: {
            init(){
                this.graph = new Graph(this,this.$refs.graphContainer,this.$refs.toolbarContainer,this.$refs.outlineContainer);
                this.graph.init();
            },
            handleSelect(key,keyPath){
                console.log(key,keyPath);
            },
            undo(){this.graph.unDo()},
            redo(){this.graph.reDo()},
            zoomIn(){this.graph.zoomIn()},
            zoomOut(){this.graph.zoomOut()},
            print(){this.graph.print()},
        }
    }
</script>

<style scoped>
    /deep/.el-input__inner {
    border: 0;
    font-size: 1.2rem;
    width: auto;
    }
    /deep/.el-submenu__title {
        height: 30px!important;
        line-height: 30px!important;
        /*border-bottom: none!important;*/
    }
    /deep/.el-divider--vertical{
        height: 2.2rem;
    }
    /deep/.el-divider--horizontal{
        margin: 10px 0;
    }
    .el-button {
        border: 0 solid;
    }
    .kbs-graph-container {
        position: relative;
        /*overflow: auto;*/
        width: 100%;
        height: 100%;
        cursor: default;
        background: url('../assets/mxgraph/4.0.0/images/grid.gif');
    }
    .kbs-graph-container-wrap {
        height: calc(100vh - 120px);
    }
    .outline-container{
        position: absolute;
        top: 110px;
        right: 0;
        border: 3px dashed #000;
        width: 160px;
        height: 120px;
        background: transparent;
    }
</style>
